<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item label="网关名称" prop="gatewayName">
            <el-input
              v-model="baTable.form.items!.gatewayName"
              placeholder="请输入网关名称"
            />
          </el-form-item>
          <el-form-item label="网关编号" prop="gatewayCode">
            <el-input
              v-model="baTable.form.items!.gatewayCode"
              placeholder="请输入网关编号"
            />
          </el-form-item>
          <el-form-item label="网关地址" prop="gatewayAddr">
            <el-input
              v-model="baTable.form.items!.gatewayAddr"
              placeholder="请输入网关地址"
            />
          </el-form-item>
          <el-form-item label="机柜" prop="siteId">
            <el-select
              v-model="baTable.form.items!.siteId"
              ref="cabinetRef"
              placeholder="请选择机柜"
              @change="selectCabinet"
            >
              <el-option
                v-for="item in state.cabinetOptions"
                :key="item.cabinetId"
                :label="item.cabinetName"
                :value="item.cabinetId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌型号" prop="gatewayModel">
            <el-input
              v-model="baTable.form.items!.gatewayModel"
              placeholder="请输入品牌型号"
            />
          </el-form-item>
          <el-form-item label="品牌型号" prop="gatewayModel">
            <el-input
              v-model="baTable.form.items!.gatewayModel"
              placeholder="请输入品牌型号"
            />
          </el-form-item>
          <el-form-item label="心跳时间" prop="gatewayPant">
            <el-input-number
              v-model="baTable.form.items!.gatewayPant"
              :step="1000"
            />
          </el-form-item>
          <el-form-item label="订阅主题" prop="topics">
            <el-input
              v-model="baTable.form.items!.topics"
              placeholder="请输入订阅主题"
            />
          </el-form-item>
          <el-form-item label="尺寸" prop="gatewaySize">
            <el-input
              v-model="baTable.form.items!.gatewaySize"
              placeholder="请输入尺寸"
            />
          </el-form-item>
          <el-form-item label="上行通讯方式" prop="siteType">
            <el-select
              v-model="baTable.form.items!.uplinkMode"
              placeholder="请选择上行通讯方式"
            >
              <el-option
                v-for="item in gateway.typeUplinkMode"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下行通讯方式" prop="siteType">
            <el-select
              v-model="baTable.form.items!.downlinkMode"
              placeholder="请选择下行通讯方式"
            >
              <el-option
                v-for="item in gateway.typeDownlinkMode"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="SIM卡号" prop="simCode">
            <el-input
              v-model="baTable.form.items!.simCode"
              placeholder="请输入SIM卡号"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="baTable.form.items!.gatewayRemark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{ baTable.form.operate === "itemAdd" ? "确定并新增下一项" : "确定" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { reactive, ref, inject, onMounted, onBeforeUnmount } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormRules } from "element-plus";
import { useUser } from "@/store/backend/SysM/user";

type Option = {
  id: number;
  label: string;
  children: Option[];
};
const user = useUser();
//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const formRef = ref<InstanceType<typeof ElForm>>();
const dictionary = inject("dictionary") as any;
const gateway = inject("gateway") as any;
const cabinet = inject("cabinet") as any;
const site = inject("site") as any;
const dictOperation = inject("dictOperation") as any;

const cabinetRef = ref();

const state: {
  siteOptions: Option[];
  deptTypeOptions: any[];
  cabinetOptions: any[];
  realSiteId: any; //真实机柜站点id
} = reactive({
  siteOptions: [], //部门列表
  deptTypeOptions: [], //部门类型列表
  cabinetOptions: [], //机柜列表
  realSiteId: 0,
});
const rules = reactive<FormRules>({
  gatewayName: [
    { required: true, message: "网关名称不能为空", trigger: "blur" },
  ],
  gatewayCode: [
    { required: true, message: "网关编号不能为空", trigger: "blur" },
  ],
  siteId: [{ required: true, message: "机柜不能为空", trigger: "blur" }],
  gatewayPant: [
    { required: true, message: "心跳时间不能为空", trigger: "blur" },
  ],
});

//选择上级站点
const siteChange = (val: any, checked: boolean, childChecked: boolean) => {
  baTable.form.items!.parentId = val.siteId;
  console.log("选择上级站点", val, baTable.form.items);
};

//获取机柜数据列表
const getCabinetList = () => {
  cabinet.getAssetCabinetList().then((res: any) => {
    state.cabinetOptions = res;

    console.log("state.siteOptions", state.siteOptions);
  });
};

//获取cabinetRef的选择名称
const getRefValue = () => {
  baTable.form.items!.siteName = cabinetRef.value.selectedLabel;
  console.log("baTable.form.items", baTable.form.items);
};

//选择机柜
const selectCabinet = (value: any) => {
  setTimeout(() => {
    getRefValue();
  });
};

//编辑表单保留原始网关名称待查站点
const keepOriginsiteName = () => {
  baTable.form.operate !== "edit"
    ? (gateway.editsiteName = "")
    : (gateway.editsiteName = baTable.form.items!.gatewayName);
};
//判断上级站点名称是否进行了修改
const isSameSiteName = () => {
  if (baTable.form.operate === "edit") {
    cabinet
      .getfilterById({ siteId: baTable.form.items!.siteId })
      .then((res: any) => {
        if (baTable.form.items!.siteName !== res.cabinetName) {
          baTable.form.items!.siteName = res.cabinetName;
        }
      });
  }
};

onMounted(() => {
  getCabinetList(); //获取机柜数据列表
  setTimeout(() => {
    keepOriginsiteName(); //编辑表单保留原始设备名称待查站点
    isSameSiteName(); //判断上级站点名称是否进行了修改
  }, 500);
});

onBeforeUnmount(() => {
  gateway.editsiteName = "";
});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  height: 500px;
  overflow-y: auto;
}
</style>
